<template>
  <div class="play-info">
    <div class="comput-times">
      <div class="times-title">
        <span class="times-title-top">计算场次：</span>
        <div class="btn-box">
          <!-- <el-button type="primary" @click="handleCompareScheme">比选方案</el-button> -->
          <el-button v-if="!isCompute" type="success" @click="handleCompute">计算</el-button>
          <el-button v-else type="success" loading>计算中</el-button>
          <el-button type="warning" @click="handleAddCount">新增场次</el-button>
          <el-button v-if="props.showBtn" type="info" class="btn-plus" @click="handleAmplify" link>
            <el-icon>
              <FullScreen />
            </el-icon>
          </el-button>
        </div>
      </div>
      <div class="times-list" v-if="state.ccInfo.length > 0">
        <div
          :class="['times-item', currentTime == index ? 'active' : '']"
          :key="index"
          v-for="(item, index) in state.ccInfo"
          @click="handleClickTime(item, index)"
        >
          <span>{{ item.ccName }}</span>
          <span @click="handleClickDelete(item)">X</span>
        </div>
      </div>
      <div class="times-list" v-else>
        <span>暂无</span>
      </div>
    </div>
    <div class="result-info">
      <div class="content-box">
        <div class="content-left" v-if="props.flag">
          <div class="left-title">区域名称</div>
          <div class="left-box">
            <div
              :class="['box-item', state.currentRegion == index ? 'active' : '']"
              :key="index"
              v-for="(item, index) in state.secListRegion"
            >
              <el-tooltip :content="item.zName" placement="top" :disabled="item.zName.length < 6">
                <span @click="handleClickRegion(item, index)">{{ item.zName }}</span>
              </el-tooltip>
            </div>
          </div>
        </div>
        <!-- 控制断面名称 -->
        <div class="content-left">
          <div class="left-title">控制断面名称</div>
          <div class="left-box">
            <!-- <div
              :class="['box-item', state.current == index ? 'active' : '']"
              :key="index"
              v-for="(item, index) in state.secList"
            >
              <span @click="handleClickSec(item, index)">{{ item.blknm }}</span
              ><span>
                <el-icon>
                  <el-icon>
                    <EditPen />
                  </el-icon>
                </el-icon>
              </span>
            </div> -->
            <el-collapse v-model="state.collapseActive" accordion @change="handleSwitchCollapse">
              <el-collapse-item name="1">
                <template #title>
                  <span class="mg10">水库</span>
                </template>
                <div class="tabs-list">
                  <div
                    :class="['list-item', state.current === index ? 'active' : '']"
                    v-for="(item, index) in state.secList.filter((v) => v.sttp == 'RR')"
                    :key="index"
                    @click="handleClickSec(item, index)"
                  >
                    <el-tooltip
                      :content="item.blknm"
                      placement="top"
                      :disabled="item.blknm.length < 6"
                    >
                      <span>{{ item.blknm }}</span>
                    </el-tooltip>
                  </div>
                </div>
              </el-collapse-item>
              <el-collapse-item name="2">
                <template #title>
                  <span class="mg10">水文站</span>
                </template>
                <div class="tabs-list">
                  <div
                    :class="['list-item', state.current === index ? 'active' : '']"
                    v-for="(item, index) in state.secList.filter((v) => v.sttp == 'ZQ')"
                    :key="index"
                    @click="handleClickSec(item, index)"
                  >
                    <el-tooltip
                      :content="item.blknm"
                      placement="top"
                      :disabled="item.blknm.length < 6"
                    >
                      <span>{{ item.blknm }}</span>
                    </el-tooltip>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
        <!-- 如果为河系 则展示 -->

        <div class="content-right">
          <div class="switch-box">
            <div class="comput-result-box">
              <div class="box-title">
                <span>各场次计算结果：</span>
              </div>
              <div class="box-form">
                <div class="form-item">
                  <div class="item-title">
                    <span class="left-title-color">场次名称:</span
                    ><span>{{ calcResult.info.ccName }}</span>
                  </div>
                  <div class="item-title">
                    <span class="left-title-color">预报 (开始/结束时间):</span
                    ><span>{{ calcResult.info.startTime }} -{{ calcResult.info.endTime }}</span>
                  </div>
                </div>
                <div class="form-item">
                  <div class="item-title">
                    <span class="left-title-color">计算耗时:</span
                    ><span>{{
                      calcResult.info.calTime ? calcResult.info.calTime + 's' : '--'
                    }}</span>
                  </div>
                  <div class="item-title">
                    <!-- <span class="left-title-color">评定结果:</span> -->
                    <!-- <span :class="['pass']">{{ '合格' }}</span> -->
                    <!-- <span
                      :class="[calcResult.info.qual == 1 ? 'pass' : 'nopass']"
                      v-if="calcResult.info.qual != 5"
                      >{{ calcResult.info.qual == 1 ? '合格' : '不合格' }}</span
                    >
                    <span v-else>{{ '--' }}</span> -->
                  </div>
                </div>
              </div>
            </div>
            <div class="view-feature">
              <el-button type="primary" @click="handleOpenTable" size="mini">特征值</el-button>
            </div>
            <div class="echarts-box">
              <SwDispatchChart
                v-if="state.waterFlag == 1"
                height="100%"
                :x-labels="state.sysTimes"
                :servers="state.servers"
              />
              <SkDispatchChart
                v-else
                height="100%"
                :x-labels="state.sysTimes"
                :servers="state.servers"
              />
              <!-- <morey-chart
                height="100%"
                :x-labels="state.sysTimes"
                :realwater-level="state.rzArr"
                :rain-area="state.rainArr"
                :simulate-water="state.fzArr"
                :real-flow="state.rqArr"
                :simulate-flow="state.fqArr"
                :warn-info="state.warnInfo"
                :fc-time="state.fcTime"
              /> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <el-dialog
      class="el-dialog-box1"
      title="查看计算特征值"
      v-model="viewFeature"
      width="80%"
      :before-close="dialogBeforeClose"
    >
      <div>
        <el-table
          table-layout="fixed"
          :data="calcResult.eigResult"
          highlight-current-row
          size="small"
          empty-text="暂无数据"
        >
          <el-table-column
            header-align="center"
            align="center"
            prop="leftKey"
            label="项目"
            size="mini"
            min-width="60"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="floodPeak"
            label="洪峰"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="floodVolume"
            label="洪量"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="waterLevel"
            label="水位"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="flashTime"
            label="洪现时间"
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table>
      </div>
    </el-dialog> -->
  </div>
  <countAdd ref="countAddRef" @closeDialog="closeDig" />
  <compareScheme ref="compareSchemeRef" />
  <mulTable ref="mulTableRef" />
</template>

<script setup>
import { ref, reactive, watch, defineEmits } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// import moreyChart from '@/components/app-echart/morey-chart.vue'
//水文
import SwDispatchChart from '@/components/app-echart/sw-dispatch-chart.vue'
//水库
import SkDispatchChart from '@/components/app-echart/sk-dispatch-chart.vue'
import { renderTime } from '@/utils/index'
import mulTable from './cpns/mulTable.vue'
//新增场次
import countAdd from './cpns/countAdd.vue'
import { getAreaSecList, getCountResult, getZoneList } from '@/services/modules/compute-methods'
import {
  getCalcSchemeccList,
  deleteCalcSchemeCc,
  // 计算结果
  getCcResult,
  // 场次计算
  modelCalculate
} from '@/services/modules/model-exam'
//
//比选方案
import compareScheme from './cpns/compareScheme.vue'
import emitter from '@/utils/bus'
const compareSchemeRef = ref(null)
const countAddRef = ref(null)
const currentTime = ref(0)
const mulTableRef = ref(null)
const calcResult = reactive({
  info: {},
  ccResult: {},
  // 统计图左侧列表信息
  eigResultArr: [
    // floodPeak:洪峰，floodVolume：洪量，waterLevel：水位，FlashTime：洪现时间
    // { leftKey: '模拟', floodPeak: '', floodVolume: '', waterLevel: '', flashTime: '' },
    // { leftKey: '实测', floodPeak: '', floodVolume: '', waterLevel: '', flashTime: '' },
    // { leftKey: '误差', floodPeak: '', floodVolume: '', waterLevel: '', flashTime: '' },
    // { leftKey: '许可误差', floodPeak: '', floodVolume: '', waterLevel: '', flashTime: '' }
  ]
})
const isCompute = ref(false)
const state = reactive({
  secList: [],
  collapseActive: '1',
  //场次结果参数
  ccResultParams: {
    ccid: '',
    blkcd: ''
  },
  ccInfo: [],
  blkcdId: '',
  tabNewData: [],
  evaResult: {},
  tableData: [],
  //时间
  sysTimes: [],
  //降雨量
  rainArr: [],
  //实测流量
  rqArr: [],
  //模拟流量
  fqArr: [],
  //实测水位
  rzArr: [],
  //模拟水位
  fzArr: [],
  // 场次信息
  ccObj: {},
  // 河系区域
  getZoneList: [],
  currentRegion: '',
  // echarts标线数据
  warnInfo: {},
  // 预报时间
  fcTime: ''
})
// 控制计算特征值弹窗
// let viewFeature = ref(false)
const props = defineProps({
  schemeId: {
    type: Number,
    default: 0
  },
  //
  zId: {
    type: Number,
    default: 0
  },
  showBtn: {
    type: Boolean,
    default: true
  },
  // 控制区域显示
  flag: {
    type: Boolean,
    default: false
  },
  // 流域id
  watershedId: {
    type: Number,
    default: 1
  }
})
function handleSwitchCollapse(val) {
  state.current = 0
  if (val == 1) {
    handleClickSec(state.secList.filter((v) => v.sttp == 'RR')[0], 0)
  } else {
    handleClickSec(state.secList.filter((v) => v.sttp == 'ZQ')[0], 0)
  }
}
// 打开计算特征值
function handleOpenTable() {
  mulTableRef.value.handleOpenModal(state.eigResultArr)
}
watch(
  // 选择方案 调用
  () => props.schemeId,
  () => {
    if (props.schemeId) {
      state.ccResultParams.ccid = ''
      // 获取场次
      getSchemesCountList(props.schemeId)
      // 如果flag是true则 不直接调用查询断面接口
      setTimeout(() => {
        if (!props.flag) {
          // 获取断面
          getSecList(props.zId)
        } else {
          // 通过zId获取河系区域、
          getRegionList(props.zId)
        }
      }, 100)
    } else {
      // 清空场次
      state.ccInfo = []
      // 清空区域
      state.secListRegion = []
      // 控制断面
      state.secList = []
      calcResult.info = {}
      calcResult.info.qual = 5
      clearEchart()
    }
  },
  { immediate: true, deep: true }
)

const emit = defineEmits(['showDialog'])
// 放大
function handleAmplify() {
  emit('showDialog')
}
function clearEchart() {
  state.sysTimes = []
  state.rainArr = []
  state.rqArr = []
  state.fqArr = []
  state.rzArr = []
  state.fzArr = []
  state.warnInfo = {}
  state.fcTime = ''
}
//获取河系区域
function getRegionList(id) {
  getZoneList({ rsid: id }).then((res) => {
    if (res.code === 200) {
      state.secListRegion = res.data
      handleClickRegion(state.secListRegion[0], 0)
    }
  })
}
// 点击河系区域查询断面
function handleClickRegion(item, index) {
  state.currentRegion = index
  getSecList(item.zid)
}
// 弹窗关闭回调
// function dialogBeforeClose() {
//   viewFeature.value = false
// }
// 打开计算特征值弹框
// function handleViewFeature() {
//   viewFeature.value = true
// }
//获取区域场次列表
function getSchemesCountList(id) {
  getCalcSchemeccList({ scid: id }).then((res) => {
    if (res.code === 200) {
      state.ccInfo = res.data
      if (state.ccInfo.length) {
        handleClickTime(state.ccInfo[0], 0)
      } else {
        emitter.emit('clearEcharts')
        calcResult.info = {}
        calcResult.info.qual = 5
      }
    }
  })
}
//点击断面
function handleClickSec(item, index) {
  if (item?.sttp == 'RR') {
    state.waterFlag = 2
    console.log('11')
  } else {
    state.waterFlag = 1
    console.log('22')
  }
  clearEchart()
  emitter.emit('clearEcharts')

  state.current = index
  emitter.emit('fixedPosition', item)
  emitter.emit('fixedSec', item.blkcd)
  state.ccResultParams.blkcd = item.blkcd
  getCcResult(state.ccResultParams).then((res) => {
    if (res.code === 200) {
      if (res.data.length) {
        calcResult.info = res.data[0]?.info
        state.servers = res.data[0]?.result
        state.servers = state.servers.map((item) => {
          return { ...item, ...res.data[0].info, scName: item.scInfo.sc_name }
        })
        state.eigResultArr = res.data[0]?.result
      } else {
        calcResult.info = {}
        calcResult.info.qual = 5
      }

      // if (res.data[0].result == []) {
      //   state.servers = [];
      // }

      // state.ccBaseInfo = res.data[0].info
    }
  })
}

//获取断面列表
function getSecList(id) {
  console.log(id, '56565656566')
  getAreaSecList({ zid: id }).then((res) => {
    if (res.code === 200) {
      state.secList = res.data
      // 默认选中第一个
      handleClickSec(res.data[0], 0)
    }
  })
}
// 点击场次赋值
function handleClickTime(item, index) {
  clearEchart()
  state.ccResultParams.ccid = item.id
  // 存储计算场次信息 用于查看计算结果
  // state.ccObj = item
  currentTime.value = index
  handleClickSec(state.secList[0], 0)
  // getCcResult({
  //   ccid: item.id,
  //   blkcd: state.ccResultParams.blkcd
  // }).then((res) => {
  //   if (res.code === 200) {
  //     console.log(res.data, '计算结果')
  // calcResult.value = res.data
  // if(res.data.ccResult.length>0){
  //   debugger
  //   res.data.ccResult.forEach((v, vIndex) => {
  //     state.sysTimes.push(v.tm)
  //     state.rainArr.push(v.p)
  //     state.rqArr.push(v.rq)
  //     state.fqArr.push(v.fq)
  //     state.rzArr.push(v.rz)
  //     state.fzArr.push(v.fz)
  //   })
  // }
  //   }
  // })
}
function handleCompareScheme() {
  compareSchemeRef.value.handleOpenModal(props.zId)
}
//刷新场次
function closeDig() {
  getSchemesCountList(props.schemeId)
}
function handleClickDelete(item) {
  ElMessageBox.confirm(`是否删除${item.ccCode}`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      deleteCalcSchemeCc({ id: item.id }).then((res) => {
        if (res.code === 200) {
          ElMessage.success(res.msg)
          getSchemesCountList(props.schemeId)
        }
      })
    })
    .catch(() => {})
}
// 模型考核场次计算
function handleCompute() {
  isCompute.value = true
  modelCalculate({
    scid: props.schemeId,
    ccid: state.ccResultParams.ccid,
    zoneId: props.watershedId
  })
    .then((res) => {
      if (res.code == 200) {
        ElMessage.success('计算成功')
        isCompute.value = false

        // 查询计算结果
        // 默认选中第一个断面
        handleClickSec(state.secList[0], 0)
        // handleClickTime(state.ccObj)
      } else {
        isCompute.value = false
      }
    })
    .catch((err) => {
      isCompute.value = false
    })
}
function handleAddCount() {
  countAddRef.value.handleOpenModal(props.schemeId)
}
</script>

<style lang="less" scoped>
.left-title-color {
  color: #797979;
}
.play-info {
  width: 100%;
  height: 100%;
  :deep(.el-dialog-box1) {
    height: 60vh;
    margin-top: 5vh !important;
    .el-dialog__body {
      height: calc(100% - 100px);
    }
  }
  .comput-times {
    width: 100%;
    height: 70px;
    margin-bottom: 20px;
    .times-title {
      font-size: 16px;

      height: 40px;
      display: flex;
      justify-content: space-between;
      .times-title-top {
        font-size: 14px;
        color: #409eff;
      }
      span {
        // font-weight: 600;
      }
      .btn-box {
        .btn-plus {
          font-size: 25px;
          font-weight: bold;
        }
      }
    }
    .times-list {
      display: flex;
      width: 100%;
      height: 40px;
      overflow-x: auto;
      white-space: nowrap;
      .times-item {
        font-size: 14px;
        width: 150px;
        height: 30px;
        border: 1px solid gray;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-right: 10px;
        padding: 0 15px;
        cursor: pointer;
        &.active {
          span {
            color: #0154db;
          }
        }
        &:hover {
          color: #0154db;
        }
        span {
          color: gray;
        }
      }
    }
  }
  .result-info {
    width: 100%;
    height: calc(100% - 90px);
    .content-box {
      display: flex;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      .content-left {
        width: 140px;
        height: 100%;
        margin: 0 5px;
        border: 1px solid #c8c2c29d;
        .left-title {
          font-size: 14px;

          height: 40px;
          background: #eee;
          display: flex;
          justify-content: center;
          align-items: center;
          color: black;
        }
        .left-box {
          height: calc(100% - 40px);
          overflow-y: auto;
          .mg10 {
            width: 100%;
            text-align: center;
            margin-left: 10px;
          }
          :deep(.el-collapse-item__wrap) {
            border: none;
          }
          :deep(.el-collapse-item__header) {
            padding-left: 10px;
          }
          :deep(.el-collapse) {
            .el-collapse-item {
              .list-item {
                text-align: center;
              }
            }
          }
          .list-item,
          .box-item {
            font-size: 14px;

            height: 30px;
            color: gray;
            display: flex;
            justify-content: center;
            align-items: center;

            span:nth-of-type(1) {
              width: 100%;
              display: inline-block;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            &.active {
              span:nth-of-type(1) {
                cursor: pointer;
                color: #409eff;
              }
            }
            &:hover {
              span:nth-of-type(1) {
                cursor: pointer;
                color: #409eff;
              }
            }
            span:nth-of-type(2) {
              color: #409eff;
              margin-right: 10px;
            }
          }
        }
      }
      .content-right {
        // width: calc(100% - 150px);
        flex: 1;
        height: 100%;
        .switch-box {
          width: 100%;
          // height: calc(100% - 70px);
          height: 100%;
          overflow-y: auto;

          .comput-result-box {
            width: 100%;
            .box-title {
              font-size: 14px;
              color: #409eff;

              height: 30px;
              padding-top: 10px;
              padding-left: 5px;

              // padding-left: 10px;
              span {
                // font-weight: 600;
              }
            }
            .box-form {
              .form-item {
                display: flex;
                justify-content: space-between;
                // flex-wrap: wrap;
                // width: 100%;
                margin-left: 5px;
                .pass {
                  color: #78ba1c;
                }
                .nopass {
                  color: orange;
                }
                .item-title {
                  font-size: 14px;

                  // flex: 0.25;
                  // margin-right: 0px;
                  width: 50%;
                  height: 30px;
                  &:nth-of-type(1) {
                  }
                  span:nth-of-type(1) {
                    margin-right: 10px;
                  }
                  span:nth-of-type(2) {
                    font-weight: 600;
                  }
                }
              }
            }
          }
          .computed-table {
            width: 100%;
            // height: 80px;
            overflow-x: auto;
          }
          .view-feature {
            display: flex;
            height: 50px;
            justify-content: flex-end;
          }
          .echarts-box {
            width: 100%;
            // height: calc(100% - 100px);
            height: 400px;

            padding: 5px;
          }
        }
      }
    }
  }
}
</style>
